<template>
  <div class="hot">
    <div class="hot-top">
      <h5><img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">本周热门榜单</h5>
      <p>全部榜单<span class="iconfont">&#xe62d;</span></p>
    </div>
      <ul class="hot-list">
        <li v-for="item in list" :key="item.id" >
          <router-link :to="/details/+item.id">
          <img :src="item.url"/>
          <p>{{item.title}}</p>
          <p class="money">￥<span>{{item.price}}</span>起</p>
          <i class="ii" v-if="item.show"><img :src="item.hoturl" alt=""></i>
          </router-link>
        </li>
      </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return {

      }
    },
    methods:{
      godetalis(){
        this.$router.push('details')
      }
    },
    props:["list"]
  }
</script>
<style scoped lang="stylus">
  @import"~@/assets/css/less.styl"
  .hot{
    margin-top:0.1rem;
    background-color: #fff;
  }
  .hot-top{
    overflow:hidden;
    padding: .12rem ;
    position:relative;
  }
  .hot-top h5{
    font-size:0.18rem;
    color:#212121;
    font-weight:normal;
  }
  .hot-top p{
    font-size:0.14rem;
    color:#616161;
    position:absolute;
    right:0.15rem;
    top:0.25rem;
  }
  .hot-top>img{
    width:0.15rem;
    height: 0.15rem;
  }
  .hot-list {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    overflow-y:hidden;
    display:inline-block;
    box-sizing:border-box;
  }
  .hot-list li{
    padding:0.06rem;
    width:1rem;
    display:inline-block;
    text-align:center;
    position:relative;
  }
  .hot-list li p{
    font-size: 0.12rem;
    padding-bottom:0.05rem;
    overflow: hidden;
    width: 100%;
    text();
  }
  .hot-list .money{
    color:#ff8300;
  }
  .hot-list img{
    width:100%;
  }
  .ii{
    position:absolute;
    top:0;
    left:0;
  }
  .ii img{
    width:0.42rem;
    height:0.2rem;
    position:absolute;
    top:0.05rem;
    left:0.05rem;
  }
</style>
